import React, { memo, useEffect } from 'react'
import { shallowEqual, useDispatch ,useSelector} from 'react-redux'
import {
  ArtistWrapper,
  HeaderWrapper,
  ArtistListWrapper
} from './style'
import { getSettleArtistDataAction } from '../../store/actionCreator'
import { formatImg } from '@/utils/format'
import useShowArtistDetail from '@/hooks/useShowArtistDetail'
export default memo(function Artist() {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getSettleArtistDataAction())
  },[dispatch])
  let { artistList } = useSelector(state => ({
    artistList:state.getIn(['recommend','artistList'])
  }), shallowEqual)
  const goToArtistDetail = useShowArtistDetail()
  return (
    <ArtistWrapper>
      <HeaderWrapper>
        <div className='title'>入驻歌手</div>
        <div className='more'>查看更多 &gt;</div>
      </HeaderWrapper>
      <ArtistListWrapper>
        {
          artistList.map(item => {
            return ( 
              <div className="artist_item" key={item.id} onClick={e => goToArtistDetail(item.id)}>
                <div className="left">
                  <img src={formatImg(item.img1v1Url,62)} alt="" />
                </div>
                <div className="right">
                  <div className="name">{ item.name }</div>
                  <div className="alias">{ item.alias[0] }</div>
                </div>
              </div>
            )
          })
        }
      </ArtistListWrapper>
      <button className='btn'>申请成为网易音乐人</button>
    </ArtistWrapper>
  )
})
